<template>
    <div class="body">
        <el-form class="loginContainer">
            <h3 class="loginTitle">
                出租客验证码登录
            </h3>
            <el-form-item>
                <el-input type="text" v-model="user.rentersInfoTel" placeholder="请输入手机号">
                </el-input>
                <el-row>
                    <el-button @click="havecode">发送验证码</el-button>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-input type="text" v-model="user.code" placeholder="请输入验证码">
                </el-input>
            </el-form-item>
            <!-- <el-checkbox class="loginRemember">记住我</el-checkbox> -->
            <el-button @click="login" type="primary" style="width:100%">登录</el-button>
            <div class="registerLink">
                <a href="#/RentersLogin" class="registerButton">返回至账号密码登录</a>
        </div>
        </el-form>
    </div>
</template>
  
<script>
export default {
    name: "RentersPhoneLogin",
    data() {
        return {
            
            user: {
                rentersInfoTel:"",
                code: ""
            }

        }
    },
    methods: {
        havecode(){
            this.$http.get("/renters/rentersAccount/rentersSend1", {
                params:{
                    rentersInfoTel:this.user.rentersInfoTel
                }
            }).then(resp => {
                alert(resp.data.message)
            })
        },
        login() {
            this.$http.post("/renters/rentersAccount/login1", this.user).then(resp => {
                alert(resp.data.message)
                if (resp.data.code == 200) {
                    this.$router.push("/RentersIndex")
                }
            })
        }

    }
}
</script>
  
<style>
.loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    text-align: left;
    margin: auto;
    margin-top: 180px;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: aliceblue;
    border: 1px solid blueviolet;
    box-shadow: 0 0 25px #55aaff;
    margin-right: 100px;
}

.loginTitle {
    margin: 0px auto 48px auto;
    text-align: center;
    font-size: 40px;
}

.loginRemember {
    text-align: left;
    margin: 0px 0px 15px 0px;
}

.body {
    margin-top: -100px;
    width: 100vw;
    height: 100vh;
    background-image: url("../../static/images/system/22.jpg"); 
    background-size: 100%;
    overflow: hidden;
}

.registerLink {
    text-align: center;
    margin-top: 10px;
}

.registerLink a {
    color: blue;
}
</style>
  